<!DOCTYPE html>
<html>
    
    <head>
        <title>代理加速链路</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <!-- Bootstrap -->
        <link href="View/FHL/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="View/FHL/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
        <link href="View/FHL/assets/styles.css" rel="stylesheet" media="screen">
        <link href="View/FHL/assets/DT_bootstrap.css" rel="stylesheet" media="screen">
        <link href="View/FHL/vendors/jGrowl/jquery.jgrowl.css" rel="stylesheet" media="screen">
        <link href="public/css/font-awesome.min.css" rel="stylesheet" media="screen">
        <!--[if lte IE 8]>
        <script language="javascript" type="text/javascript" src="View/FHL/vendors/flot/excanvas.min.js"></script>
        <![endif]-->
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>

        <![endif]-->
        <script src="View/FHL/vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    <style>
        td{
            word-wrap:break-word;
            text-align: center;
        }
        table{
            table-layout:fixed ;
        }
        #setMode {
            height:700px;
            /* SET THE WIDTH OF THE MODAL 设置Modal的宽度*/
            width:800px;
        }
        #setMode .modal-body {
            height:600px;
            max-height: 600px;
            /* SET THE WIDTH OF THE MODAL 设置Modal的宽度*/
            width:700px;
            /* CHANGE MARGINS TO ACCOMODATE THE NEW WIDTH (original = margin: -250px 0 0 -280px;) */
            /*margin:-250px -450px;*/
        }
    </style>
    
    <body>
    {include h}
        <div class="container-fluid">

            <div class="row-fluid">
                {include l}
                <!--/span-->
                <div class="span10" id="content">
                    <div class="row-fluid">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left">代理任务列表</div>
                            </div>
                            <div class="block-content collapse in">
                                <div class="span12">
                                    <table class="table"  >
                                        <thead class="success">
                                        <tr>

                                            <th style="width: 20%;word-wrap:break-word;">代理模式</th>
                                            <th style="width: 10%">级别</th>
                                            <th style="width: 5%">代理端口</th>
                                            <th style="width: 15%">上级ip</th>
                                            <th style="width: 5%">上级端口</th>

                                            <th style="width: 5%">运行</th>
                                            <th style="width: 20%">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="table_body">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!-- /block -->
                    </div>
<!--速度统计图-->
                    <div class="row-fluid section" style="display: none">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left">传输速度统计</div>
                                <div class="pull-right">
                                    <span class="badge badge-warning">1000</span>
                                </div>
                            </div>
                            <div class="block-content collapse in">
                                <div class="span12">
                                    <div id="LineTask" style="height: 500px;"></div>
                                </div>
                            </div>
                        </div>
                        <!-- /block -->
                    </div>
 <!--/速度统计图-->
                    <!-- set mode  -->
                    <div id="setMode" class="modal hide">
                        <div class="modal-header">
                            <button data-dismiss="modal" class="close" type="button">&times;</button>
                            <h3>设置任务参数</h3>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal form">
                                <fieldset>
                                    <div class="control-group">
                                        <label class="control-label" >代理级别</label>
                                        <div class="controls">
                                            <select  name="level"  class="chzn-select" id="level">
                                                <option value="1" >一级代理</option>
                                                <option value="2" >二级代理</option>
                                            </select>
                                            <span class="help-inline" >服务端选一级代理，用户选二级代理</span>
                                        </div>
                                    </div>
                                    <div class="control-group">
                                        <label class="control-label" >本加速器监听端口</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="lport" type="text" value="" readonly=“readonly”>
                                            <span class="help-inline" id="lport_help">本地浏览器设置代理时使用这个端口</span>
                                        </div>
                                    </div>

                                    <div class="control-group hidden" id="divRip">
                                        <label class="control-label" >一级代理IP</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="rip" type="text" id="rip" value="">
                                            <span class="btn btn-danger btn-mini" id="pingButton" onclick="FHLping();">测试</span>
                                        </div>
                                    </div>
                                    <div class="control-group hidden" style="" id="divRport">
                                        <label class="control-label">一级代理端口</label>
                                        <div class="controls">
                                            <input class="input-xlarge disabled"  name="rport" type="text" value="" readonly=“readonly”>
                                            <span class="help-inline" >到一级代理加速协议端口 UDP协议</span>
                                        </div>
                                    </div>
                                    <div style="display: none">
                                    <h4>高级设置</h4>
                                    <div class="control-group" style="" >
                                        <label class="control-label">发送窗口</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="sndwnd" type="text" value="4096">
                                            <span class="help-inline" >带宽(MB)*1024*1024*RTT(s)/MTU</span>
                                        </div>
                                    </div>
                                    <div class="control-group" style="">
                                        <label class="control-label">接收窗口</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="rcvwnd" type="text" value="4096">
                                            <span class="help-inline" >带宽(MB)*1024*1024*RTT(s)/MTU</span>
                                        </div>
                                    </div>
                                    <div class="control-group" style="" >
                                        <label class="control-label">mtu</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="mtu" type="text" value="1400">
                                            <span class="help-inline" >一般不要改</span>
                                        </div>
                                    </div>
                                    <div class="control-group" style="" >
                                        <label class="control-label">确认周期</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="interval" type="text" value="50">
                                            <span class="help-inline" >可稍大于时延，单位是ms</span>
                                        </div>
                                    </div>

                                    <div class="control-group" style="" >
                                        <label class="control-label">单IP限速</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="ipspeed" type="text" value="30">
                                            <span class="help-inline" >对单个IP连接速度控制单位是MB</span>
                                        </div>
                                    </div>
                                    <div class="control-group" style="" >
                                        <label class="control-label">hh超时</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="hhtimeout" type="text" value="5000">
                                            <span class="help-inline" >http头部超时判断时间,一般不要改</span>
                                        </div>
                                    </div>
                                    <div class="control-group" style="" >
                                        <label class="control-label">hhbuf</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="hhbuf" type="text" value="8192">
                                            <span class="help-inline" >http头部缓冲区大小,一般不要改</span>
                                        </div>
                                    </div>
                                    <div class="control-group" style="" >
                                        <label class="control-label">tcp超时</label>
                                        <div class="controls">
                                            <input class="input-xlarge focused"  name="timeout" type="text" value="5000">
                                            <span class="help-inline" >tcp连接超时时间,一般不要改</span>
                                        </div>
                                    </div>
                                </div>
                                    <div class="form-actions">
                                        <button type="submit" data-taskid="" class="btn btn-primary">保存</button>
                                        <button data-dismiss="modal" class="btn" >取消</button>
                                    </div>
                                </fieldset>
                            </form>
                        </div>
                    </div>
                    <!-- /set mode  -->

                    <div id="sysTestModal" class="modal hide" style="width: 50%;
                    top: 50%;
                    left: 70%;
                    transform: translate(-50%, -50%);">
                        <div class="modal-header">
                            <button data-dismiss="modal" class="close" type="button">&times;</button>
                            <h3>测试反馈</h3>
                        </div>
                        <div class="modal-body" id="sysTestContent">

                        </div>
                    </div>
                </div>
            </div>
            <hr>
            {include f}
        </div>
        <!--/.fluid-container-->
        <link href="View/FHL/vendors/datepicker.css" rel="stylesheet" media="screen">
        <link href="View/FHL/vendors/uniform.default.css" rel="stylesheet" media="screen">
        <link href="View/FHL/vendors/chosen.min.css" rel="stylesheet" media="screen">
        <link href="View/FHL/vendors/wysiwyg/bootstrap-wysihtml5.css" rel="stylesheet" media="screen">
        <link rel="stylesheet" href="View/FHL/vendors/morris/morris.css">


        <script src="View/FHL/vendors/jquery-1.9.1.js"></script>
        <script src="View/FHL/bootstrap/js/bootstrap.min.js"></script>
        <script src="View/FHL/vendors/datatables/js/jquery.dataTables.min.js"></script>

        <script src="View/FHL/vendors/jquery.uniform.min.js"></script>
        <script src="View/FHL/vendors/chosen.jquery.min.js"></script>
        <script src="View/FHL/vendors/bootstrap-datepicker.js"></script>

        <script src="View/FHL/assets/DT_bootstrap.js"></script>
        <script src="View/FHL/vendors/wysiwyg/wysihtml5-0.3.0.js"></script>
        <script src="View/FHL/vendors/wysiwyg/bootstrap-wysihtml5.js"></script>

        <script src="View/FHL/vendors/wizard/jquery.bootstrap.wizard.min.js"></script>
		<script src="View/FHL/vendors/jGrowl/jquery.jgrowl.js"></script>

        <script src="View/FHL/assets/scripts.js"></script>

        <script src="View/FHL/vendors/raphael-min.js"></script>
        <script src="View/FHL/vendors/morris/morris.min.js"></script>
        <script src="View/FHL/assets/echarts.min.js"></script>
        <script>
            //全局变量
            var currHost="local";//默认是本地
            var taskList;//全局变量 后边都能用
            var curtaskid=0;
            var curtasklist_index=0;
            //获取任务列表
            function getTaskList() {
                $.get("{php HYBBS_URL('task','getTaskList');}",
                    {
                        currHost:currHost,
                        type:'p'
                    },
                    function(e){
                    if(e.error){
                        taskList = e.data;
                        var htmltmp = "";
                        $("#table_body").empty();
                        for(var i in taskList){
                            var classtype ;
                            if(i%2==0){
                                classtype = 'success';
                            }else {
                                classtype = 'info';
                            }
                            //任务性质

                            var run = taskList[i]['run']==1?"<li class='icon-fire'></li>":"<li class='icon-ban-circle'></li>";
                            var rip = taskList[i]['level']==1?'-':taskList[i]['rip'];
                            var rport = taskList[i]['level']==1?'-':taskList[i]['rport'];
                            htmltmp+=' <tr class="'+classtype+'">'+
                                    '<td style="width: 5%" >'+taskList[i]['type']+'</td>'+
                                    '<td style="width: 20%" >'+taskList[i]['level']+'</td>'+
                                    '<td style="width: 10%" >'+taskList[i]['lport']+'</td>'+
                                    '<td style="width: 20%" >'+rip +'</td>'+
                                    '<td style="width: 20%" >'+rport+'</td>'+//'<span class="label label-success">1</span>

                                    '<td style="width: 20%" >'+run+'</td>'+
                                    '<td style="width: 20%" ><div class="btn-group">'+
                                        '<button class="btn btn-info btn-mini showSetMode" data-taskid="'+taskList[i]['taskid'] +'" data-taskindex='+i+'><i class="icon-wrench icon-white"></i></button>'+
                                        '<button class="btn btn-success TaskOP btn-mini" data-href="?Task/restartTask?type=p&taskid='+taskList[i]['taskid']+'" > <i class="icon-play icon-white"></i> </button>'+
                                        '<button class="btn btn-warning TaskOP btn-mini" data-href="?Task/killTask?type=p&taskid='+taskList[i]['taskid']+'" ><i class="icon-stop icon-white"></i></button>'+
                                        '<button class="btn btn-primary TaskRefresh btn-mini" style="display: none" data-href="?Task/getTaskLog?type=p&taskid='+taskList[i]['taskid']+'" > <i class="fa fa-line-chart icon-white"></i> </button>'+
                                        '<button class="btn btn-primary TaskCheck btn-mini" data-href="?Task/autoTest?type=p&taskid='+taskList[i]['taskid']+'" > <i class="icon-info-sign icon-white"></i> </button>'+
                                    '</div></td>'+
                            '</tr>';
                        }
                        $("#table_body").append(htmltmp);
                        //console.log(e.data);
                        $('.popover-left').popover({placement: 'left', trigger: 'hover'});
                        //$.jGrowl(e.info);
                    }else{
                        $.jGrowl(e.info);
                    }

                },'json');
            }


            var speeddata=[];
            var fsizedata=[];
            var timedata=[];

            function coverLineDat(data) {
                speeddata=[];
                fsizedata=[];
                timedata=[];
                for (var i in data){
                    timedata.push(data[i]['cdt']);
                    fsizedata.push(data[i]['fsizeB']/1000/1000);
                    speeddata.push(data[i]['speedB']/1000/1000);
                }

            }

            function FHLping(){
                // return false;
                $.post("{php HYBBS_URL('testConn','FHLping');}",{
                    ip:$('input[name=rip]').val()
                },  function(e){
                    if(e.state){
                        $.jGrowl(e.info);
                    }else{
                        $.jGrowl(e.info);
                    }
                },'json');
                 
                 
              };
        $(function() {
            var chartDom = document.getElementById('LineTask');
            var myChart = echarts.init(chartDom);
            var option;
            getTaskList();
            //refreshTask();
            $(".uniform_on").uniform();

            $('.textarea').wysihtml5();
			$('.form').submit(function() {return false;});
            $("#level").change(function(){
                var level=($(this).val());
                if(level=="1"){
                    //接收方向
                    $('#lport_help').html("本地监听的加速接口 udp协议");
                    $('#divRip').addClass("hidden");
                    $('#divRport').addClass("hidden");
                }else if(level=="2"){

                    $('#lport_help').html("本地浏览器设置代理时使用这个端口 TCP协议");
                    $('#divRip').removeClass("hidden");
                    $('#divRport').removeClass("hidden");
                }
            });

            //编辑提交
			$(".form :submit").click(function(){
				var postdata = $(this).closest("form").serializeArray();
				postdata.push(
                    {
                        name:"taskid",
                        value: curtaskid,
                    }
                );
				console.log(postdata);
				$.post("{php HYBBS_URL('task','editPTask');}", postdata,  function(e){
					if(e.state){
							window.location.reload();
					}else{
						$.jGrowl(e.info);
					}

				},'json');

			});
             //执行测试命令
            $('table').on("click",'.TaskCheck',
                function(ee){
                    $.jGrowl("自检大概需要10秒......");
                $.get($(this).data('href'),{},  function(e){
                    if(e.state){
                        $('#sysTestContent').empty();
                        for(var i in e.info){
                            $('#sysTestContent').append("<pre>"+e.info[i]+"</pre>");
                        }
                        $('#sysTestModal').modal('show')

                    }else{
                        $.jGrowl(e.info);
                    }

                },'json');
            });
            //执行任务操作命令
            $('table').on("click",'.TaskOP',
                function(ee){
                $.get($(this).data('href'),{},  function(e){
                    if(e.state){
                        $.jGrowl(e.info);
                        setTimeout(function () {
                            window.location.reload();
                        },3000);

                    }else{
                        $.jGrowl(e.info);
                    }

                },'json');
            });

            $('table').on("click",".showSetMode",
                    function(e){
                        //console.log($(this).parent().siblings('td').text());
                        curtaskid = $(this).data('taskid');
                        curtasklist_index = $(this).data('taskindex');
                        $('#setMode').modal('show');

                        $("select[name=level]").val(taskList[curtasklist_index]['level']).trigger("liszt:updated");
                        $(".chzn-select").chosen();
                        $('input[name=lport]').val(taskList[curtasklist_index]['lport']);
                        $('input[name=rip]').val(taskList[curtasklist_index]['rip']);
                        $('input[name=rport]').val(taskList[curtasklist_index]['rport']);
                        $('input[name=sndwnd]').val(taskList[curtasklist_index]['sndwnd']);
                        $('input[name=rcvwnd]').val(taskList[curtasklist_index]['rcvwnd']);
                        $('input[name=ipspeed]').val(taskList[curtasklist_index]['ipspeed']);
                        $('input[name=hhtimeout]').val(taskList[curtasklist_index]['hhtimeout']);
                        $('input[name=hhbuf]').val(taskList[curtasklist_index]['hhbuf']);
                        $('input[name=timeout]').val(taskList[curtasklist_index]['timeout']);

                        if(taskList[curtasklist_index]['level']=="1"){
                            //接收方向
                            $('#lport_help').html("本地监听的加速接口 udp协议");
                            $('#divRip').addClass("hidden");
                            $('#divRport').addClass("hidden");
                        }else if(taskList[curtasklist_index]['level']=="2"){

                            $('#lport_help').html("本地浏览器设置代理时使用这个端口 TCP协议");
                            $('#divRip').removeClass("hidden");
                            $('#divRport').removeClass("hidden");
                        }



                    }
            );
            
        });
        </script>
    </body>

</html>